<template>
	<view>
		<!-- 		<search-select v-model="selected" :candidates="options" dataKey="name" dataValue="id" placeholder="请输入搜索条件"
			@input="onSearch" @select="onSelect"></search-select> -->
		<view v-if="list.length>0">
			<uni-list v-for="item in list">
				<uni-list-item :title="item.groupName+(item.type==1?'业主':'访客')"
					:note="item.type==2? '通行时间:'+item.dateTimeFrom+'--'+item.dateTimeTo:''">
					<template v-slot:body>
						<view> 
							<text>{{item.groupName}}</text>
							<uni-tag style="margin-left: 5px;" size="mini" :text="item.type==1?'业主':'访客'"
								:type="item.type==1?'primary':'success'" />

						</view>
					</template>
					<template v-slot:footer>

						<view class="chat-custom-right"><uni-icons class="slot-box" fontFamily="code" :size="26"
								@click="open(item.id)">{{'&#xe646'}}</uni-icons>
							<text :class="item.expire?'chat-custom-text':'native'">{{item.expire?'开门码已过期':'开门码'}}
							</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view v-else>
			<no-data />
		</view>

		<uni-popup ref="popup" type="center" background-color="#fff" :animation="false">
			<canvas id="qrcode" canvas-id="qrcode" style="width: 250px;height: 250px;"></canvas>
		</uni-popup>
	</view>
</template>

<script>
	import {
		request
	} from '../../api/request';
	import searchSelect from '@/component/search-select.vue';
	import UQRCode from "uqrcodejs"
	import noData from '../../component/no-data.vue';
	export default {
		data() {
			return {
				selected: '',
				options: [],
				list: [],
				openid: wx.getStorageSync('openId'),
			};
		},
		components: {
			'search-select': searchSelect,
			'no-data': noData
		},
		onLoad() {

			this.getList(this.openid, this.selected);
		},
		methods: {
			open(userId) {
				this.$refs.popup.open('center');
				request({
					url: `/api/v1/people-info/qrcode/${userId}`,
					method: 'POST'
				}).then(res => {
					var qr = new UQRCode();
					qr.data = res.data;
					qr.size = 250;
					qr.margin = 20;
					qr.errorCorrectLevel = 1;
					qr.make();
					var canvasContext = uni.createCanvasContext('qrcode', this);
					qr.canvasContext = canvasContext;
					qr.drawCanvas();
				})
			},
			onSelect(e) {
				this.selected = e;
				this.getList(this.openid, this.selected);
			},
			onSearch(value) {
				if (value) {
					this.getRemoteData();
				} else {
					this.options = []
				}
			},
			async getRemoteData() {
				await request({
					url: '/api/v1/people-group/select',
					method: "POST"
				}).then(res => {
					this.options = res.data
					console.log(this.options, 1111111);
				})

			},
			getGroupName(group) {
				let groupName = ""
				for (let op of this.options) {
					if (op.id == group) {
						groupName = op.name;
					}
				}
				return groupName
			},
			getList(openid, selected) {
				request({
					url: `/api/v1/people-info/openid?openid=${openid}&&groupId=${selected}`,
					method: 'GET'
				}).then(async res => {
					let list = res.data;
					await this.getRemoteData();
					this.list = list.filter(item => {
						if (item.status == 2) {
							let nowDate = new Date().getTime();
							if (item.dateTimeTo && new Date(item.dateTimeTo).getTime() < nowDate) {
								item.expire = true;
							}
							item.groupName = this.getGroupName(item.groupId)
							return item
						}
					})
					console.log(this.list, 222222);
				})
			}
		},
	};
</script>
<style>
	@font-face {
		font-family: code;
		src: url('@/static/iconfont.ttf');
	}

	.slot-box {
		width: 30px;
		height: 30px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: red;
	}

	.native {
		font-size: 12px;
		color: #999;
	}
</style>